<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="规格/做法"
    :canFullscreen="true"
    :minHeight="0"
    @ok="handleSubmit"
  >
    <a-card title="规格">
      <a-radio-group v-model:value="cuisineSpecsIndex" button-style="solid">
        <a-space>
          <template v-for="item of cuisineSpecsListData">
            <a-radio-button :value="item.id">
              <a-space>
                <div> {{ item.specsName }}</div>
                <div>￥{{ item.money }}</div>
              </a-space>
            </a-radio-button>
          </template>
        </a-space>
      </a-radio-group>
    </a-card>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { reactive, ref, unref, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CollapseContainer } from '/@/components/Container';
  import { SelectedCuisine } from '/@/views/restaurant/cashier/index.data';
  import { getListAll } from '/@/api/cuisine/cuisineSpecs';

  const cuisineSpecsIndex = ref<string>('');

  const cuisineSpecsListData = ref<any[]>([]);

  const cuisine = ref<SelectedCuisine>({});
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });

    cuisine.value = data.record;
    cuisineSpecsListData.value = await getListAll({
      cuisineId: cuisine.value.cuisineId,
    });
    cuisineSpecsIndex.value = cuisineSpecsListData.value[0].id;
  });
  function findIndexSpecs(cuisineSpecsId: string) {
    return cuisineSpecsListData.value.find((item) => item.id === cuisineSpecsId);
  }

  async function handleSubmit() {
    try {
      let cuisineSpecs = findIndexSpecs(cuisineSpecsIndex.value);
      //暂时放这
      cuisine.value.cuisineSpecs = cuisineSpecs;
      cuisine.value.specsName = cuisineSpecs.specsName;
      cuisine.value.money = cuisineSpecs.money;

      setModalProps({ confirmLoading: true });
      closeModal();
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  defineExpose({
    registerModal,
    handleSubmit,
  });
</script>
<style lang="less" scoped>
  .background {
    background-color: @body-background;
  }
</style>
